@charset "utf-8";
/* CSS Document */
section, section div {
  /* See it in slo-mo, you can change this */
  transition-duration: .6s;font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
/*--adjust as necessary--*/
    color: #fff;
    font-size: 25px;
}

* { box-sizing: border-box; }


section, .button { transition-timing-function: ease; }

section {
  display:block;
  position: relative;
  padding: .375rem .375rem 0;
  height: 2.5rem;
  background: #A9ADB6;
  border-radius: .25rem;
  perspective: 300;
  box-shadow: 0 -1px 2px #fff, inset 0 1px 2px rgba(0,0,0,.2), inset 0 .25rem 1rem rgba(0,0,0,.1);
}
#soc{margin-top:30px;}
.ttt {
margin-top:30px;
}
.ggg{
margin-top:30px;
}

.button { opacity: 0;text-align:center; }

.cover {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  transform-origin: center bottom;
  transform-style: preserve-3d;
  font: 1.25em/2 "icon";
  color: white;
  text-align: center;
  pointer-events: none;
  z-index: 100;
}

.innie, .outie, .spine, .shadow { position: absolute; width: 100%; }

.innie, .outie {
  height: 100%;
  background-image: -webkit-linear-gradient(top, transparent 0%, rgba(0,0,0,.1) 100%);
  border-radius: .25rem;
}
.innie:after, .outie:after { content:"\f099"; }

.innie {
  background-color: #67E2FE;
  text-shadow: 0 -2px 4px rgba(0,0,0,.2);
}

.spine {
  top: .25rem;
  background: #20C7F3;
  height: .25rem;
  transform: rotateX(90deg);
  transform-origin: center top;
}

.shadow {
  top: 100%;
  left: 0;
  height: 3.5rem;
  transform-origin: center top;
  transform: rotateX(90deg);
  opacity: 0;
  z-index: 0;
  background-image: -webkit-linear-gradient(top, rgba(0,0,0,.6) 0%, transparent 100%);
  background-image: linear-gradient(to bottom, rgba(0,0,0,.6) 0%, transparent 100%);
  border-radius: .4rem;

}

.outie {
  background-color: #2DAAE1;
  transform: translateZ(.25rem);
  text-shadow: 0 2px 4px rgba(0,0,0,.2);
}

section:hover { background: #EBEFF2; }
section:hover .button { opacity: 1; }

section:hover .cover, section:hover .innie, section:hover .spine, section:hover .outie, section:hover .spine { transition-timing-function: cubic-bezier(.2,.7,.1,1.1); }

section:hover .cover { transform: rotateX(-120deg);  }

section:hover .innie { background-color: #DB4DDB; }
section:hover .spine { background-color: #DB4DDB; }
section:hover .outie { background-color: #CC00CC; color: rgba(255,255,255,0); }

section:hover .shadow {
  opacity: 1;
  transform: rotateX(45deg) scale(.95);
}


small {
  font: .8rem/1 sans-serif;
  padding-top: 4rem;
  color: #777;
}
small a { color: #222; text-decoration: none; border-bottom: thin solid #ccc; }
small a:hover { border-bottom-color: #222; }





.coverf {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  transform-origin: center bottom;
  transform-style: preserve-3d;
  font: 1.25em/2 "icon";
  color: white;
  text-align: center;
  pointer-events: none;
  z-index: 100;
}

.innief, .outief, .spinef, .shadowf { position: absolute; width: 100%; }

.innief, .outief {
  height: 100%;
  background-image: -webkit-linear-gradient(top, transparent 0%, rgba(0,0,0,.1) 100%);
  border-radius: .25rem;
}
.innief:after, .outief:after { content:"\f09a"; }

.innief {
  background-color: #67E2FE;
  text-shadowf: 0 -2px 4px rgba(0,0,0,.2);
}

.spinef {
  top: .25rem;
  background: #20C7F3;
  height: .25rem;
  transform: rotateX(90deg);
  transform-origin: center top;
}

.shadowf {
  top: 100%;
  left: 0;
  height: 3.5rem;
  transform-origin: center top;
  transform: rotateX(90deg);
  opacity: 0;
  z-index: 0;
  background-image: -webkit-linear-gradient(top, rgba(0,0,0,.6) 0%, transparent 100%);
  background-image: linear-gradient(to bottom, rgba(0,0,0,.6) 0%, transparent 100%);
  border-radius: .4rem;

}

.outief {
  background-color: #3C5B9B;
  transform: translateZ(.25rem);
  text-shadowf: 0 2px 4px rgba(0,0,0,.2);
}

section:hover .coverf, section:hover .innief, section:hover .spinef, section:hover .outief, section:hover .spinef { transition-timing-function: cubic-bezier(.2,.7,.1,1.1); }

section:hover .coverf { transform: rotateX(-120deg);  }

section:hover .innief { background-color: #DB4DDB; }
section:hover .spinef { background-color: #DB4DDB; }
section:hover .outief { background-color: #CC00CC; color: rgba(255,255,255,0); }

section:hover .shadowf {
  opacity: 1;
  transform: rotateX(45deg) scale(.95);
}
.fb-like{margin-top:4px;}

.coverg {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  transform-origin: center bottom;
  transform-style: preserve-3d;
  font: 1.25em/2 "icon";
  color: white;
  text-align: center;
  pointer-events: none;
  z-index: 100;
}

.innieg, .outieg, .spineg, .shadowg { position: absolute; width: 100%; }

.innieg, .outieg {
  height: 100%;
  background-image: -webkit-linear-gradient(top, transparent 0%, rgba(0,0,0,.1) 100%);
  border-radius: .25rem;
}
.innieg:after, .outieg:after { content:"\f0d5"; }

.innieg {
  background-color: #67E2FE;
  text-shadowg: 0 -2px 4px rgba(0,0,0,.2);
}

.spineg {
  top: .25rem;
  background: #20C7F3;
  height: .25rem;
  transform: rotateX(90deg);
  transform-origin: center top;
}

.shadowg {
  top: 100%;
  left: 0;
  height: 3.5rem;
  transform-origin: center top;
  transform: rotateX(90deg);
  opacity: 0;
  z-index: 0;
  background-image: -webkit-linear-gradient(top, rgba(0,0,0,.6) 0%, transparent 100%);
  background-image: linear-gradient(to bottom, rgba(0,0,0,.6) 0%, transparent 100%);
  border-radius: .4rem;

}

.outieg {
  background-color: #F63E28;
  transform: translateZ(.25rem);
  text-shadowg: 0 2px 4px rgba(0,0,0,.2);
}

section:hover .coverg, section:hover .innieg, section:hover .spineg, section:hover .outieg, section:hover .spineg { transition-timing-function: cubic-bezier(.2,.7,.1,1.1); }

section:hover .coverg { transform: rotateX(-120deg);  }

section:hover .innieg { background-color: #DB4DDB; }
section:hover .spineg { background-color: #DB4DDB; }
section:hover .outieg { background-color: #CC00CC; color: rgba(255,255,255,0); }

section:hover .shadowg {
  opacity: 1;
  transform: rotateX(45deg) scale(.95);
}

.coversoc {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  transform-origin: center bottom;
  transform-style: preserve-3d;
  font: 1.25em/2 "icon";
  color: white;
  text-align: center;
  pointer-events: none;
  z-index: 100;
}

.inniesoc, .outiesoc, .spinesoc, .shadowsoc { position: absolute; width: 100%; }

.inniesoc, .outiesoc {
  height: 100%;
  background-image: -webkit-linear-gradient(top, transparent 0%, rgba(0,0,0,.1) 100%);
  border-radius: .25rem;
}
.inniesoc:after, .outiesoc:after { content: "\f006"; }

.inniesoc {
  background-color: #67E2FE;
  text-shadowsoc: 0 -2px 4px rgba(0,0,0,.2);
}

.spinesoc {
  top: .25rem;
  background: #20C7F3;
  height: .25rem;
  transform: rotateX(90deg);
  transform-origin: center top;
}

.shadowsoc {
  top: 100%;
  left: 0;
  height: 3.5rem;
  transform-origin: center top;
  transform: rotateX(90deg);
  opacity: 0;
  z-index: 0;
  background-image: -webkit-linear-gradient(top, rgba(0,0,0,.6) 0%, transparent 100%);
  background-image: linear-gradient(to bottom, rgba(0,0,0,.6) 0%, transparent 100%);
  border-radius: .4rem;

}

.outiesoc {
  background-color: #33CC33;
  transform: translateZ(.25rem);
  text-shadowsoc: 0 2px 4px rgba(0,0,0,.2);
}

section:hover .coversoc, section:hover .inniesoc, section:hover .spinesoc, section:hover .outiesoc, section:hover .spinesoc { transition-timing-function: cubic-bezier(.2,.7,.1,1.1); }

section:hover .coversoc { transform: rotateX(-120deg);  }

section:hover .inniesoc { background-color: #DB4DDB; }
section:hover .spinesoc { background-color: #DB4DDB; }
section:hover .outiesoc { background-color: #CC00CC; color: rgba(255,255,255,0); }

section:hover .shadowsoc {
  opacity: 1;
  transform: rotateX(45deg) scale(.95);
}



section, section div {
  /* See it in slo-mo, you can change this */
  transition-duration: .6s;font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
/*--adjust as necessary--*/
    color: #fff;
    font-size: 25px;
}

* { box-sizing: border-box; }


section, .button { transition-timing-function: ease; }

#em {
  display:block;
  position: relative;
  padding: .375rem .375rem 0;
  height: auto;
  background: #A9ADB6;
  border-radius: .25rem;
  perspective: 300;
  box-shadowem: 0 -1px 2px #fff, inset 0 1px 2px rgba(0,0,0,.2), inset 0 .25rem 1rem rgba(0,0,0,.1);
}


.button { opacity: 0; }

.coverem {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  transform-origin: center bottom;
  transform-style: preserve-3d;
  font: 1.25em/2 "icon";
  color: white;
  text-align: center;
  pointer-events: none;
  z-index: 100;
}

.innieem, .outieem, .spineem, .shadowem { position: absolute; width: 100%; }

.innieem, .outieem {
  height: 100%;
  background-image: -webkit-linear-gradient(top, transparent 0%, rgba(0,0,0,.1) 100%);
  border-radius: .25rem;
}
.innieem:after, .outieem:after { content:"\f0e0  Subscribe Us!"; }

.innieem {
  background-color: #67E2FE;
  text-shadowem: 0 -2px 4px rgba(0,0,0,.2);
}

.spineem {
  top: .25rem;
  background: #20C7F3;
  height: .25rem;
  transform: rotateX(90deg);
  transform-origin: center top;
}

.shadowem {
  top: 100%;
  left: 0;
  height: 3.5rem;
  transform-origin: center top;
  transform: rotateX(90deg);
  opacity: 0;
  z-index: 0;
  background-image: -webkit-linear-gradient(top, rgba(0,0,0,.6) 0%, transparent 100%);
  background-image: linear-gradient(to bottom, rgba(0,0,0,.6) 0%, transparent 100%);
  border-radius: .4rem;

}

.outieem {
  background-color: #FF0066;
  transform: translateZ(.25rem);
  text-shadowem: 0 2px 4px rgba(0,0,0,.2);
}

section:hover { background: #EBEFF2; }
section:hover .button { opacity: 1; }

section:hover .coverem, section:hover .innieem, section:hover .spineem, section:hover .outieem, section:hover .spineem { transition-timing-function: cubic-bezier(.2,.7,.1,1.1); }

section:hover .coverem { transform: rotateX(-120deg);  }

section:hover .innieem { background-color: #DB4DDB; }
section:hover .spineem { background-color: #DB4DDB; }
section:hover .outieem { background-color: #CC00CC; color: rgba(255,255,255,0); }

section:hover .shadowem {
  opacity: 1;
  transform: rotateX(45deg) scale(.95);
}


small {
  font: .8rem/1 sans-serif;
  padding-top: 4rem;
  color: #777;
}
small a { color: #222; text-decoration: none; border-bottom: thin solid #ccc; }
small a:hover { border-bottom-color: #222; }
